import React, { memo, useEffect, useRef, useState } from "react";
import { Player } from "video-react";
import "video-react/dist/video-react.css";
import TestWarrper from "./style";
import nbFormat from "@/util/NumberFormat";
import {
  HeartOutlined,
  VerticalAlignBottomOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import { useNavigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  getMVDetaillInfo,
  getMVurlInfo,
  getSimiMVInfo,
} from "@/store/modules/mvSlice";
import { changeLoading } from "@/store/modules/themeSlice";
const index = memo(() => {
  const params = useParams();
  const dispatch = useDispatch();
  const [flag, changeF] = useState(false);
  const [isLoadPlay,changeIsLoadPlay] = useState(false);
  const nav = useNavigate()
  useEffect(() => {
    if (params.mv) {
      dispatch(getMVurlInfo(params.mv));
      dispatch(getSimiMVInfo(params.mv));
      dispatch(getMVDetaillInfo(params.mv));
    }
  }, [params]);
  const { url, detail, simiMV,isLoading } = useSelector((state) => {
    return {
      url: state?.mv?.mvUrl?.url,
      detail: state.mv.mvDetail,
      simiMV: state.mv.simiMv,
      isLoading:state.theme.isLoading,
    };
  });

  useEffect(()=>{
    if(simiMV.length>=1){
      dispatch(changeLoading(false))
    }
  })
  useEffect(()=>{
    return ()=>{
      dispatch(changeLoading(true))
    }
  },[])
  // 当路由发生变化的时候，设置为显示
  useEffect(()=>{
    setTimeout(()=>{
      changeIsLoadPlay(true)
    },500)
  },[params])
  // 跳转页面的时候，设置为隐藏
  const changeMVid = (id)=>{
    nav("/playMV/"+id)
    changeIsLoadPlay(false)
  }
  return (
    <TestWarrper>
      {
        isLoading?'加载中...':""
      }
        {
          isLoadPlay && (<Player>
            <source src={url} />
          </Player>)
        }
      <div className="info">
        <h4>{detail?.name}</h4>
        <p>
          演唱：<span className="singger">{detail?.artistName}</span>
          &nbsp;&nbsp;{nbFormat(detail?.playCount)}
          万次&nbsp;观看&nbsp;&nbsp;发布时间：{detail?.publishTime}
        </p>
        <div className="btns">
          <span>
            <HeartOutlined className="ic" />
            收藏
          </span>
          <span>
            <VerticalAlignBottomOutlined className="ic" />
            下载
          </span>
          <span>
            <ShareAltOutlined className="ic" />
            分享
          </span>
        </div>
      </div>
      <div className="simi-mv">
        {simiMV.map((n, i) => {
          return (
            <div key={i} className="simi-item" onClick={e=>changeMVid(n.id)}>
              <img src={n.cover} alt="" />
              <div className="name">{n.name}</div>
              <div className="artical">来自：{n.artistName}</div>
            </div>
          );
        })}
        <div className="simi-item"></div>
        <div className="simi-item"></div>
      </div>
    </TestWarrper>
  );
});

export default index;
